<template>
    <div class="content">
        <div class="download">
            <div>
                <div class="titleWrap">
                    <div class="title1">
                        <img src="/static/images/card/icon1.png" class="titletIcon" />
                        申请人信息
                    </div>
                    <div class="titleImgTips">仅支持上传图片</div>
                </div>
                <div class="idCardWrap">
                    申请人身份证正反面拍照上传<span
                        style="color: red; margin-left: 6px"
                        >*</span
                    >
                </div>

                <div class="phoneCode">
                    <div>
                        <p
                            style="
                                font-size: 1rem;
                                color: #3d3d3d;
                                font-weight: bold;
                                margin-bottom: 0.625rem;
                            "
                        >
                            头像面
                        </p>
                        <p>上传您的身份证头像面</p>
                    </div>
                    <div>
						<u-upload
							:maxCount="1"
							:fileList="fileList1"
							@delete="beforeDelete1"
							@afterRead="afterRead1"
							width="196rpx"
							height="196rpx"
						>
							<image src="/static/images/card/idcard1.png" mode="widthFix" style="width: 196rpx;height: 196rpx"></image>
						</u-upload>
                    </div>
                </div>
                <div class="phoneCode">
                    <div>
                        <p
                            style="
                                font-size: 1rem;
                                color: #3d3d3d;
                                font-weight: bold;
                                margin-bottom: 0.625rem;
                            "
                        >
                            国徽面
                        </p>
                        <p>上传您的身份证国徽面</p>
                    </div>
                    <div>
                        <u-upload
                            :maxCount="1"
                            :fileList="fileList2"
                            @delete="beforeDelete2"
                            @afterRead="afterRead2"
							width="196rpx"
							height="196rpx"
                        >
						<image src="/static/images/card/idcard2.png" mode="widthFix" style="width: 196rpx;height: 196rpx"></image>
						</u-upload>
                    </div>
                </div>
            </div>
        </div>
        <div class="download">
            <div>
                <div class="titleWrap">
                    <div class="title1">
                        <img src="/static/images/card/icon2.png" class="titletIcon" />
                        诊断相关材料
                    </div>
                    <div class="titleImgTips">仅支持上传图片</div>
                </div>
                <div class="idCardWrap">
                    筛查阳性报告上传<span style="color: red; margin-left: 6px"
                        >*</span
                    >
                </div>

                <div class="addImgWrap">
                    <u-upload
                        :maxCount="3"
                        :fileList="fileList3"
                        @delete="beforeDelete3"
                        @afterRead="afterRead3"
						width="196rpx"
						height="196rpx"
                    >
					<image src="/static/images/card/addimg.png" mode="widthFix" style="width: 196rpx;height: 196rpx"></image>
					</u-upload>
                </div>
                <div class="idCardWrap">
                    肠镜检查报告/病理诊断报告上传<span style="color: red; margin-left: 6px"
                        >*</span
                    >
                </div>

                <div class="addImgWrap">
                    <u-upload
                        :maxCount="3"
                        :fileList="fileList4"
                        @delete="beforeDelete4"
                        @afterRead="afterRead4"
						width="196rpx"
						height="196rpx"
                    >
						<image src="/static/images/card/addimg.png" mode="widthFix" style="width: 196rpx;height: 196rpx"></image>
					</u-upload>
                </div>
            </div>
            <div class="idCardWrap">支付发票/支付凭证上传（需包含实付金额）<span style="color: red; margin-left: 6px">*</span>
            </div>
            <div>
                <u-upload
                    :maxCount="3"
                    :fileList="fileList5"
                    @delete="beforeDelete5"
                    @afterRead="afterRead5"
					width="196rpx"
					height="196rpx"
                >
					<image src="/static/images/card/addimg.png" mode="widthFix" style="width: 196rpx;height: 196rpx"></image>
				</u-upload>
            </div>
        </div>
		<view class="bottom">
			<u-button text="提交" color="linear-gradient(315deg, #E9A656 0%, #FDE3B6 100%)" shape="circle" :loading="btnLoading" @click="sumbit()" :customStyle="customButtonStyle" />
		</view>
    </div>
</template>

<script>
import {
		baseUrl
	} from "@/config/tendIdConfig.js";
export default {
    data() {
        return {
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            fileList5: [],
            btnLoading: false,
			customButtonStyle:{
				color: "#333",
			}
        };
    },
	onLoad(options) {
		this.cardNum = options.cardNum
		this.equityInfoId = options.equityInfoId
	},
    methods: {
		async afterRead1(event) {
		    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		    let lists = [].concat(event.file);
		    let fileListLen = this.fileList1.length;
		    lists.map((item) => {
		        this.fileList1.push({
		            ...item,
		            status: "uploading",
		            message: "上传中",
		        });
		    });
		    for (let i = 0; i < lists.length; i++) {
		        const result = await this.uploadFilePromise(lists[i].url);
		        let item = this.fileList1[fileListLen];
		        this.fileList1.splice(
		            fileListLen,
		            1,
		            Object.assign(item, {
		                status: "success",
		                message: "",
		                uploadResult: result,
		                url: result,
		            })
		        );
		        fileListLen++;
		    }
		},
		async afterRead2(event) {
		    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		    let lists = [].concat(event.file);
		    let fileListLen = this.fileList2.length;
		    lists.map((item) => {
		        this.fileList2.push({
		            ...item,
		            status: "uploading",
		            message: "上传中",
		        });
		    });
		    for (let i = 0; i < lists.length; i++) {
		        const result = await this.uploadFilePromise(lists[i].url);
		        let item = this.fileList2[fileListLen];
		        this.fileList2.splice(
		            fileListLen,
		            1,
		            Object.assign(item, {
		                status: "success",
		                message: "",
		                uploadResult: result,
		                url: result,
		            })
		        );
		        fileListLen++;
		    }
		},
		async afterRead3(event) {
		    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		    let lists = [].concat(event.file);
		    let fileListLen = this.fileList3.length;
		    lists.map((item) => {
		        this.fileList3.push({
		            ...item,
		            status: "uploading",
		            message: "上传中",
		        });
		    });
		    for (let i = 0; i < lists.length; i++) {
		        const result = await this.uploadFilePromise(lists[i].url);
		        let item = this.fileList3[fileListLen];
		        this.fileList3.splice(
		            fileListLen,
		            1,
		            Object.assign(item, {
		                status: "success",
		                message: "",
		                uploadResult: result,
		                url: result,
		            })
		        );
		        fileListLen++;
		    }
		},
		async afterRead4(event) {
		    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		    let lists = [].concat(event.file);
		    let fileListLen = this.fileList4.length;
		    lists.map((item) => {
		        this.fileList4.push({
		            ...item,
		            status: "uploading",
		            message: "上传中",
		        });
		    });
		    for (let i = 0; i < lists.length; i++) {
		        const result = await this.uploadFilePromise(lists[i].url);
		        let item = this.fileList4[fileListLen];
		        this.fileList4.splice(
		            fileListLen,
		            1,
		            Object.assign(item, {
		                status: "success",
		                message: "",
		                uploadResult: result,
		                url: result,
		            })
		        );
		        fileListLen++;
		    }
		},
		async afterRead5(event) {
		    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		    let lists = [].concat(event.file);
		    let fileListLen = this.fileList5.length;
		    lists.map((item) => {
		        this.fileList5.push({
		            ...item,
		            status: "uploading",
		            message: "上传中",
		        });
		    });
		    for (let i = 0; i < lists.length; i++) {
		        const result = await this.uploadFilePromise(lists[i].url);
		        let item = this.fileList5[fileListLen];
		        this.fileList5.splice(
		            fileListLen,
		            1,
		            Object.assign(item, {
		                status: "success",
		                message: "",
		                uploadResult: result,
		                url: result,
		            })
		        );
		        fileListLen++;
		    }
		},
		
		async uploadFilePromise(url) {
			 const token = uni.getStorageSync("access_token");
		    const that = this;
		    return new Promise((resolve, reject) => {
		        let a = uni.uploadFile({
		            url: baseUrl + "/customer/oss_to_direct/getUploadUrl",
		            filePath: url,
		            header: {
		              "Content-Type": "multipart/form-data",
		              Authorization: `Bearer ${token}` || "",
		            },
		            name: "file",
		            success: (res) => {
		                const result = JSON.parse(res.data);
		                if (result.code === 200) {
		                    uni.showToast({
		                        title: "上传成功",
		                        icon: "success",
		                    });
		                    setTimeout(() => {
		                        resolve(result.data);
		                    }, 1000);
		                } else {
		                    uni.showToast({
		                        title: "上传失败",
		                        icon: "fail",
		                    });
		                    setTimeout(() => {
		                        reject(result.msg);
		                    }, 1000);
		                }
		            },
		        });
		    });
		},
		
		beforeDelete1(event) {
			//删除的附件从fileList中删掉
		    this.fileList1.splice(event.index, 1);
		},
		beforeDelete2(event) {
			//删除的附件从fileList中删掉
		    this.fileList2.splice(event.index, 1);
		},
		beforeDelete3(event) {
			//删除的附件从fileList中删掉
		    this.fileList3.splice(event.index, 1);
		},
		beforeDelete4(event) {
			//删除的附件从fileList中删掉
		    this.fileList4.splice(event.index, 1);
		},
		beforeDelete5(event) {
			//删除的附件从fileList中删掉
		    this.fileList5.splice(event.index, 1);
		},

        sumbit() {
            console.log("object :>> 1111", this.fileList1);
            console.log("object :>> 2222", this.fileList2);
            console.log("object :>> 333", this.fileList3);
            console.log("object :>> 333", this.fileList4);
            console.log("object :>> 333", this.fileList5);
            if (
                !this.fileList1.length ||
                !this.fileList2.length ||
                !this.fileList3.length ||
                !this.fileList4.length ||
                !this.fileList5.length 
            )
				return uni.$u.toast("请上传图片！");
            this.btnLoading = true;
            const uplodImgUrl = {
                idCardFront: this.fileList1.map((v) => v.url),
                idCardOpposite: this.fileList2.map((v) => v.url),
                medicalReport: this.fileList3.map((v) => v.url),
                diagnosis: this.fileList4.map((v) => v.url),
                prescription: this.fileList5.map((v) => v.url),
            };
			const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
			const that = this;
			uni.request({
				url: baseUrl + '/customer/equityWorkOrderH5/web/addEquityWorkOrder',
				method: 'POST',
				data: {
					equityInfoId: that.equityInfoId,
					cardNum: that.cardNum,
					workInfo: JSON.stringify(uplodImgUrl),
				},
				header: {
					Authorization: token
				},
				success(res) {
					if (res.data.code === 200) {
						that.$u.route({
							url: "/pages_card/writeResults/index",
							params: {
								workState: res.data.data.workState,
							}
						})
					} else {
					    uni.showToast({
					    	title: res.data.msg,
					    	icon: "fail"
					    })
					}
				},
				fail(error) {
					uni.showToast({
						title: error.data.msg,
						icon: "fail"
					})
				}
			})
        },
    },
};
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.content {
    height: 100%;
    background: #f6f7fb;
    padding: 0.9375rem 0.875rem 2.25rem;
    box-sizing: border-box;
}
.download {
    background: #fff;
    border-radius: 0.625rem;
    color: #333;
    font-size: 1rem;
    padding: 1rem;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
}

.title1 {
    font-size: 1.125rem;
    color: #333333;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.phoneCode {
    width: 100%;
    height: 7.75rem;
    background: rgba(251, 222, 174, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.25rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    font-weight: 400;
    color: #999;
    margin-bottom: 1rem;
}
.titleWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.titletIcon {
    width: 1.875rem;
    height: 1.875rem;
    margin-right: 0.625rem;
}
.titleImgTips {
    font-size: 0.75rem;
    font-weight: 400;
    color: #ff7b7b;
}
.idCardWrap {
    font-weight: 400;
    color: #333333;
    font-size: 0.875rem;
    margin: 1rem 0;
}
.bottom {
	width: 100%;
	padding:0 40rpx 60rpx;
	box-sizing: border-box;
}
.addImgWrap {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 1.25rem;
}

.error-msg {
    font-size: 12px;
    font-weight: unset;
    color: red;
    float: right;
    display: flex;
    align-items: center;
}
.error-msg::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    /* background-image: url(@/static/images/card/round_close.png); */
	background-color: #e9a656;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 4px;
}
.right-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
}
</style>
